<script setup>
import {ref} from "vue"
import colors from "../Data/colors.js"
import {ApiConfig} from "../../ApiConfig.js"

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    }
})
const formType = ref("style")
const edit = ref(false)
</script>

<template>
    <div class="Text1 print-template-element-form-container ">
        <el-radio-group v-model="formType" size="small">
            <el-radio-button value="style">样式</el-radio-button>
            <el-radio-button value="data">数据</el-radio-button>
        </el-radio-group>
        <el-divider style="margin: 10px 0"></el-divider>
        <!--样式表单-->
        <el-form v-if="formType==='style'" :model="elem.styleConfig" class="form" label-position="left" label-width="auto" size="small">
            <div class="node-name" @dblclick="edit = true">
                <el-input v-if="edit" v-model="elem.name" autofocus @blur="edit = false" @keydown="e => e.code === 'Enter' ? edit = false : ''" />
                <span v-else style="font-size: 20px">{{ elem.name }}</span>
            </div>
            <el-form-item label="字体">
                <el-select v-model="elem.styleConfig.fontFamily" filterable style="width: 100%">
                    <el-option value="auto" label="系统默认" />
                    <el-option value="宋体, sans-serif" label="宋体" />
                    <el-option value="Arial, sans-serif" label="Arial" />
                    <el-option value="serif" label="serif" />
                    <el-option value="cursive" label="cursive" />
                </el-select>
            </el-form-item>
            <el-form-item label="文字大小">
                <el-select v-model="elem.styleConfig.fontSize" filterable style="width: 100%">
                    <el-option v-for="i in 30" :key="i" :value="(10+i) + 'px'">{{ 10 + i }}px</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文字颜色">
                <el-color-picker v-model="elem.styleConfig.color" :predefine="colors" show-alpha />
            </el-form-item>
            <el-form-item label="字体粗细">
                <el-radio-group v-model="elem.styleConfig.fontWeight">
                    <el-radio value="normal">普通</el-radio>
                    <el-radio value="bold">粗体</el-radio>
                </el-radio-group>
            </el-form-item>
            <FCssStyle :css-style="elem.styleConfig" @use="sty => elem.styleConfig = sty" />
        </el-form>
        <!--数据表单-->
        <el-form v-if="formType==='data'" :model="elem.dataConfig" class="form" label-position="left" label-width="auto" size="small">
            <el-form-item label="数据绑定方式">
                <el-radio-group v-model="elem.dataConfig.bindType">
                    <el-radio value="static">静态</el-radio>
                    <el-radio value="dynamic">动态</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-if="elem.dataConfig.bindType === 'static'" label="数据">
                <el-input v-model="elem.dataConfig.value" type="textarea" />
            </el-form-item>
            <el-form-item v-if="elem.dataConfig.bindType === 'dynamic'" label="数据">
                <el-select v-model="elem.dataConfig.value">
                    <el-option v-for="(api, i) in (elem.dataConfig.apiConfig || ApiConfig)" :key="i" :label="api.name" :value="api.code" />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>

</style>